<template>
  <!-- 登录页面 -->
  <div class="float-gradient">
    <!-- <div class="row justify-content-center"></div>
    <editorVue></editorVue>
    <markdownVue></markdownVue> -->
    <!--------------------------------------
顶部导航栏
--------------------------------------->
    <nav
      class="topnav navbar navbar-expand-lg navbar-dark bg-hero-pattern fixed-top"
    >
      <div class="container-fluid">
        <div class="navbar-collapse collapse" id="navbarColor02" style="">
          <ul class="navbar-nav mr-auto d-flex align-items-center">
            <li class="nav-item">
              <a class="nav-link" href="./index.html">返回首页</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->

    <!-- Main -->
    <div class="align-items-center">
      <div
        class="d-md-flex align-items-center h-md-100 p-5 justify-content-center"
      >
        <form class="border rounded p-20">
          <h3 class="mb-4 text-center">登入</h3>
          <div class="form-group">
            <input
              type="email"
              class="form-control"
              id="exampleInputEmail1"
              placeholder="账号"
              required=""
              v-model="account"
              ref="account"
            />
          </div>
          <div class="form-group">
            <input
              type="password"
              class="form-control"
              id="exampleInputPassword1"
              placeholder="密码"
              required=""
              v-model="password"
              ref="password"
            />
          </div>
          <div class="form-group form-check">
            <input
              type="checkbox"
              class="form-check-input"
              id="exampleCheck1"
            />
            <label class="form-check-label small text-muted" for="exampleCheck1"
              >记住密码</label
            >
          </div>
          <button
            type="submit"
            class="btn btn-cyan btn-round btn-block shadow-lg"
            @click="JumpToLoginView()"
          >
            登入
          </button>
          <small class="d-block mt-4 text-center"
            ><a class="text-gray" href="#">忘记密码？</a></small
          >
        </form>
      </div>
    </div>
    <!-- End Main -->
  </div>
  <!-- End Main -->
</template>
<script>
import headerVue from '@/views/layout/components/header/index.vue'
import mainVue from '@/views/layout/components/main.vue'
import floatingVue from '@/views/layout/components/floating.vue'
import listVue from '@/views/main/components/list/index.vue'
import editorVue from '@/views/layout/components/artcle-creater/Editor.vue'
import markdownVue from '@/views/layout/components/artcle-creater/Mardown.vue'
import '@/api/move.js' //鼠标动画
export default {
  data() {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    JumpToLoginView() {
      console.log(this.account)
      // const that = this
      // that.$router.push('/backend')
    }
  }
}
</script>
<style scoped>
.float-gradient {
  background-color: #47dd99;
  background-image: radial-gradient(
      closest-side,
      rgb(67, 225, 102),
      rgba(71, 201, 231, 0)
    ),
    radial-gradient(closest-side, rgb(64, 238, 174), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgb(125, 231, 231), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgb(173, 231, 72), rgba(170, 142, 245, 0));
  background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
  background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
  background-repeat: no-repeat;
  animation: 15s moiveAnimation infinite;
}

@keyframes moiveAnimation {
  0%,
  100% {
    background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
    background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
  }
  25% {
    background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;
    background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;
  }
  50% {
    background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;
    background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;
  }
  75% {
    background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;
    background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;
  }
}
</style>
